<template>
  <div>
    <div>
      <!-- 查询 -->
      <div class="filter-container">
        <el-form :inline="true" class="search-form">
          <el-row style="display: flex; flex-wrap: wrap">
            <div style="flex: 1">
              <el-form-item label="名称：" class="search-form-item">
                <el-input
                  clearable
                  v-model="query.goods_name"
                  placeholder="请输入产品名称"
                />
              </el-form-item>
              <el-form-item label="类目：" class="search-form-item">
                <el-cascader
                  clearable
                  v-model="value"
                  :options="typeData"
                  :props="{
                    expandTrigger: 'hover',
                    checkStrictly: true,
                    value: 'id',
                    label: 'category_name',
                  }"
                  @change="handleChange"
                  placeholder="请选择类目ID"
                ></el-cascader>
              </el-form-item>
            </div>
            <div style="text-align: right">
              <el-button
                size="small"
                type="primary"
                icon="el-icon-search"
                @click="search"
                >查询</el-button
              >
              <el-button
                size="small"
                type="primary"
                icon="el-icon-refresh"
                @click="resetting"
                >重置</el-button
              >
            </div>
          </el-row>
        </el-form>
      </div>
    </div>
    <div>
      <div>
        <el-row style="display: flex">
          <div style="flex: 1"></div>
          <div>
            <div class="right-panel el-button-group">
              <el-button
                class=""
                icon="el-icon-refresh"
                size="mini"
                @click="resetting"
              ></el-button>
              <el-dropdown trigger="click" :hide-on-click="false">
                <span class="el-dropdown-link">
                  <el-button
                    class=""
                    icon="el-icon-s-operation"
                    size="mini"
                  ></el-button>
                </span>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item v-for="fruit in allTableThead" :key="fruit">
                    <el-checkbox v-model="checkboxTableThead" :label="fruit">{{
                      tableTheadOptions[fruit].label
                    }}</el-checkbox>
                  </el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </div>
          </div>
        </el-row>
      </div>
      <div>
        <el-tabs
          v-model="activeName"
          @tab-click="handleClick"
          style="height: 66px"
        >
          <el-tab-pane label="普通商品" name="1"></el-tab-pane>
          <el-tab-pane label="卡密商品" name="2"></el-tab-pane>
          <el-tab-pane label="虚拟商品" name="3"></el-tab-pane>
        </el-tabs>
      </div>
      <!-- 订单列表 -->
      <el-row :gutter="20">
        <el-col class="detail_table">
          <el-table
            v-loading="loading"
            highlight-current-row
            :data="tableData"
            :header-cell-style="{
              'background-color': '#f3f8fe',
              color: '#606266',
              height: '50px',
            }"
            style="width: 100%"
            height="100%"
          >
            <el-table-column
              v-for="fruit in tableThead"
              :key="fruit"
              :label="tableTheadOptions[fruit].label"
              width="120"
              align="center"
            >
              <template slot-scope="scope">
                <div v-if="fruit == 'type'">
                  {{
                    scope.row.type == 1
                      ? "普通商品"
                      : scope.row.type == 2
                      ? "卡密商品"
                      : "虚拟商品"
                  }}
                </div>
                <div v-else-if="fruit == 'main_image'">
                  <div style="width: 40px; height: 40px; margin: 0 auto">
                    <el-image
                      v-if="scope.row.main_image"
                      :src="scope.row.main_image"
                      :preview-src-list="[scope.row.main_image]"
                    />
                  </div>
                </div>
                <div v-else-if="fruit == 'status'">
                  <el-tag v-if="scope.row.status == 1" size="mini"
                    >已上架</el-tag
                  >
                  <el-tag v-else type="danger" size="mini">已下架</el-tag>
                </div>
                <div v-else-if="fruit == 'guige'">
                  <el-button
                    type="text"
                    size="mini"
                    @click="management(scope.row)"
                  >
                    规格管理
                  </el-button>
                </div>
                <div v-else>
                  <el-tooltip
                    placement="top-start"
                    :content="scope.row[fruit].toString()"
                    effect="light"
                  >
                    <div class="one_line_hidden">
                      {{ scope.row[fruit] ? scope.row[fruit] : "-" }}
                    </div>
                  </el-tooltip>
                </div>
              </template>
            </el-table-column>
            <el-table-column
              fixed="right"
              width="120"
              prop="address"
              label="操作"
              align="center"
            >
              <template slot-scope="scope">
                <el-button
                  type="text"
                  size="mini"
                  @click="detailorder(scope.row)"
                >
                  详情
                </el-button>
                <el-divider direction="vertical"></el-divider>
                <el-button
                  v-hasPermi="'supplierorder/del'"
                  type="text"
                  size="mini"
                  @click="deleteorder(scope.row.id)"
                >
                  删除
                </el-button>
              </template>
            </el-table-column>
          </el-table></el-col
        >
      </el-row>
      <el-row>
        <el-col class="marginTop" style="text-align: right">
          <pagination
            v-show="total > 0"
            :total="total"
            :page.sync="query.page"
            :limit.sync="query.count"
            @pagination="getlist"
          />
        </el-col>
      </el-row>
    </div>
    <!-- 详情 -->
   <!-- <el-drawer
      :modal-append-to-body="false"
      :append-to-body="true"
      title="详情"
      size="900px"
      :visible.sync="drawer"
      :direction="direction"
    > -->
    <el-drawer :modal-append-to-body="false" :append-to-body="true" title="详情" size="65%" :withHeader="false"
      :visible.sync="drawer" @close="closing_balance_details" :show-close="true">
      <div class="drawerTitle">
        <span>详情</span>
        <div class="close" @click="closing_balance_details">
          <i class="el-icon-close"></i>
        </div>
      </div>
      <div
        style="padding: 0 20px; position: relative"
        v-loading="detailLoading"
      >
        <div>
          <h4>{{ goodsdetail.goods_name }}</h4>

          <h5 style="font-weight: 400">{{ goodsdetail.sub_title }}</h5>
        </div>
        <el-tabs v-model="activeNames" @tab-click="handledetailClick">
          <el-tab-pane label="基本信息" name="six" class="marginTop">
            <div class="informationTitleView">
              <div class="leftBox">
                <div class="leftborder"></div>
                <div class="text">基础信息</div>
              </div>
              <div class="right"></div>
            </div>
            <el-descriptions
              style="margin: 5px 0;"
              :column="2"
            >
              <el-descriptions-item label="商品名称">
                {{ goodsdetail.goods_name ? goodsdetail.goods_name : "-" }}
              </el-descriptions-item>
              <el-descriptions-item label="编码">
                {{ goodsdetail.product_code ? goodsdetail.product_code : "-" }}
              </el-descriptions-item>

              <el-descriptions-item label="商品类型" :span="2">
                <span v-if="goodsdetail.type == 1" size="mini"
                  >普通商品</span
                >
                <span v-if="goodsdetail.type == 2" size="mini"
                  >卡密商品</span
                >
                <span v-if="goodsdetail.type == 3" size="mini"
                  >虚拟商品</span
                >
              </el-descriptions-item>
              <el-descriptions-item label="商品分类" :span="2">
                <span v-if="goodsdetail.category1_name">{{
                  goodsdetail.category1_name
                }}</span>
                <span v-if="goodsdetail.category2_name">{{
                  goodsdetail.category2_name
                }}</span>
                <span v-if="goodsdetail.category3_name">{{
                  goodsdetail.category3_name
                }}</span>
              </el-descriptions-item>
              <el-descriptions-item label="商品图片">
                <div style="width: 40px; height: 40px;border-radius: 5px;">
                  <el-image style="width: 40px; height: 40px;"
                    :src="goodsdetail.main_image ? goodsdetail.main_image : '-'"
                    :preview-src-list="[
                      goodsdetail.main_image ? goodsdetail.main_image : '-',
                    ]"
                  />
                </div>
              </el-descriptions-item>
              <!-- <el-descriptions-item label="商品缩略图">
                <div style="width: 40px; height: 40px; margin: 0 auto">
                  <el-image
                    :src="goodsdetail.thumbnail ? goodsdetail.thumbnail : '-'"
                    :preview-src-list="[
                      goodsdetail.thumbnail ? goodsdetail.thumbnail : '-',
                    ]"
                  />
                </div>
              </el-descriptions-item> -->
              <el-descriptions-item label="商品轮播图" :span="2">
                <div
                  v-for="(item, index) in goodsdetail.slider_image"
                  :key="index"
                  style="width: 40px; height: 40px;overflow: hidden;"
                >
                  <el-image  style="width: 40px; height: 40px;"
                    :src="item ? item : '-'"
                    :preview-src-list="[item ? item : '-']"
                  />
                </div>
              </el-descriptions-item>
              <el-descriptions-item label="商品上下架状态">
                <span type="success" v-if="goodsdetail.status == 1"
                  >已上架
                </span>
                <span type="danger" v-else>已下架 </span>
              </el-descriptions-item>
              <el-descriptions-item label="运费类别">
                <span v-if="goodsdetail.shipping_type == 1">固定邮费 </span>
                <span v-else>运费模板 </span>
              </el-descriptions-item>
              <el-descriptions-item label="运费">
                {{ goodsdetail.shipping_fee ? goodsdetail.shipping_fee : "-" }}
              </el-descriptions-item>
              <el-descriptions-item label="配送方式">
                <span v-if="goodsdetail.delivery_type == 1">快递 </span>
                <span v-else-if="goodsdetail.delivery_type == 2"
                  >门店配送
                </span>
                <span v-else>到店自提 </span>
              </el-descriptions-item>
              <el-descriptions-item label="添加者姓名">
                {{
                  goodsdetail.admin_info ? goodsdetail.admin_info.username : "-"
                }}
              </el-descriptions-item>
              <el-descriptions-item label="添加者手机号">
                {{
                  goodsdetail.admin_info ? goodsdetail.admin_info.phone : "-"
                }}
              </el-descriptions-item>
              <el-descriptions-item label="负责人姓名">
                {{
                  goodsdetail.responsibleList
                    ? goodsdetail.responsibleList.responsible_person
                    : "-"
                }}
              </el-descriptions-item>
              <el-descriptions-item label="负责人手机号">
                {{
                  goodsdetail.responsibleList
                    ? goodsdetail.responsibleList.supplier_mobile
                    : "-"
                }}
              </el-descriptions-item>
            </el-descriptions>
            <div class="informationTitleView">
              <div class="leftBox">
                <div class="leftborder"></div>
                <div class="text">规格信息</div>
              </div>
              <div class="right"></div>
            </div>
            <el-descriptions
              v-for="(item, index) in goodsdetail.goods_product
                ? goodsdetail.goods_product
                : []"
              :key="index"
              :column="2"
            >
              <el-descriptions-item label="规格名称">
                {{ item.sku_name ? item.sku_name : "-" }}
              </el-descriptions-item>
              <el-descriptions-item label="规格ID">
                {{ item.id ? item.id : "-" }}
              </el-descriptions-item>
              <el-descriptions-item label="规格图片">
                <div style="width: 40px; height: 40px;">
                  <el-image style="width: 40px; height: 40px;"
                    :src="item.sku_img ? item.sku_img : '-'"
                    :preview-src-list="[item.sku_img ? item.sku_img : '-']"
                  />
                </div>
              </el-descriptions-item>
              <el-descriptions-item label="零售价">
                {{ item.retail_price ? item.retail_price : "-" }}
              </el-descriptions-item>
              <el-descriptions-item label="成本价">
                {{ item.cost_price ? item.cost_price : "-" }}
              </el-descriptions-item>
              <el-descriptions-item label="库存">
                {{ item.inventory ? item.inventory : "-" }}
              </el-descriptions-item>
              <el-descriptions-item label="单位">
                {{ item.unit ? item.unit : "-" }}
              </el-descriptions-item>
              <el-descriptions-item label="产品编码">
                {{ item.code ? item.code : "-" }}
              </el-descriptions-item>
            </el-descriptions>
          </el-tab-pane>
          <el-tab-pane label="商品详情" name="Infodetail">
            <div style="display: inline-block">
              <div class="phone">
                <div class="receiver">
                  <div></div>
                </div>
                <div class="html">
                  <el-scrollbar style="height: 746px">
                    <div v-html="Infodetail"></div>
                  </el-scrollbar>
                </div>
              </div>
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>
    </el-drawer>
    <el-dialog
      title="库存管理"
      :visible.sync="dialogVisible"
      width="800px"
      :before-close="handleClose"
    >
      <el-row :gutter="20">
        <el-col>
          <el-table
            v-loading="loading"
            highlight-current-row
            :data="kucunData"
            :header-cell-style="{
              'background-color': '#f3f8fe',
              color: '#606266',
              height: '50px',
            }"
            style="width: 100%"
          >
            <el-table-column prop="id" label="规格ID" align="center">
            </el-table-column>
            <el-table-column prop="goods_id" label="商品ID" align="center">
            </el-table-column>
            <el-table-column prop="sku_name" label="规格名称" align="center">
            </el-table-column>
            <el-table-column prop="sku_img" label="规格图片" align="center">
              <template slot-scope="scope">
                <div style="width: 50px; height: 50px; margin: 0 auto">
                  <el-image
                    style="width: 50px; height: 50px"
                    v-if="scope.row.sku_img"
                    :src="scope.row.sku_img"
                  />
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="retail_price" label="零售价" align="center">
            </el-table-column>
            <el-table-column prop="cost_price" label="成本价" align="center">
            </el-table-column>
            <el-table-column prop="inventory" label="库存" align="center">
            </el-table-column>
            <el-table-column prop="code" label="产品码" align="center">
            </el-table-column>
            <el-table-column prop="unit" label="单位" align="center">
            </el-table-column>

            <el-table-column
              prop="Inventory_alert"
              label="库存预警"
              align="center"
            >
              <el-switch
                v-model="forms.inventory_alert"
                active-color="#2d8cf0"
                inactive-color="#ccc"
                active-value="1"
                inactive-value="0"
                disabled
              >
              </el-switch>
            </el-table-column>
            <el-table-column
              fixed="right"
              width="180"
              prop="address"
              label="操作"
              align="center"
            >
              <template slot-scope="scope">
                <el-button
                  type="text"
                  size="small"
                  @click="editlevel(scope.row)"
                >
                  编辑
                </el-button>
                <!-- <el-button type="text" size="small">
                    删除
                  </el-button> -->
              </template>
            </el-table-column>
          </el-table></el-col
        >
      </el-row>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false"
          >确 定</el-button
        >
      </span>
    </el-dialog>
    <!-- 编辑 -->
    <el-dialog title="编辑" :visible.sync="editdialogVisible" width="800px">
      <el-form
        ref="editform"
        :rules="rules"
        :model="editform"
        label-width="120px"
      >
        <el-form-item label="规格名称：" prop="sku_name">
          <el-input
            v-model="editform.sku_name"
            placeholder="请输入规格名称"
            style="width: 510px"
          ></el-input>
        </el-form-item>
        <el-form-item label="零售价：" prop="retail_price">
          <el-input
            v-model="editform.retail_price"
            placeholder="请输入商品零售价"
            style="width: 510px"
          ></el-input>
        </el-form-item>
        <el-form-item label="成本价：" prop="cost_price">
          <el-input
            v-model="editform.cost_price"
            placeholder="请输入商品成本价"
            style="width: 510px"
          ></el-input>
        </el-form-item>
        <el-form-item label="库存：" prop="inventory">
          <el-input
            v-model="editform.inventory"
            placeholder="请输入商品库存"
            style="width: 510px"
          ></el-input>
        </el-form-item>
        <el-form-item label="产品码：" prop="code">
          <el-input
            v-model="editform.code"
            placeholder="请输入商品产品码"
            style="width: 510px"
          ></el-input>
        </el-form-item>
        <el-form-item label="库存预警：" prop="inventory_alert">
          <el-switch
            v-model="editform.inventory_alert"
            active-color="#2d8cf0"
            inactive-color="#ccc"
            active-value="1"
            inactive-value="0"
          >
          </el-switch>
        </el-form-item>
        <el-form-item label="单位：" prop="unit">
          <el-select
            @change="changesku"
            v-model="editform.unit"
            placeholder="请选择"
            style="width: 510px"
          >
            <el-option
              v-for="item in skulist"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="图片：" prop="sku_img">
          <logo-upload
            :single-file="sku_imgs"
            :show-file-list="false"
            accept="image/jpeg, image/png"
            @uploadCallback="skuCallback"
            style="width: 90px; height: 90px"
          />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="editdialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="comitedit('editform')"
          >保 存</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

  <script>
import LogoUpload from "@/components/FileUpload";
import Editgoods from "../../supplierorder/edits.vue";

import {
  goodslist,
  GoodsCateList,
  delgoods,
  supplierLists,
  getGoodsProductList,
  getLabelList,
  SaveGoodsProduct,
  getSupplierGoodsInfo,
} from "@/api/supplier/index";
const tableTheadOption = {
  id: {
    label: "ID",
    field: "id",
  },
  supplier_name: {
    label: "供货商名称",
    field: "supplier_name",
  },
  goods_name: {
    label: "产品名称",
    field: "goods_name",
  },
  sub_title: {
    label: "副标题",
    field: "sub_title",
  },
  product_code: {
    label: "商品编码",
    field: "product_code",
  },
  type: {
    label: "商品类型",
    field: "type",
  },
  main_image: {
    label: "商品主图",
    field: "main_image",
  },
  CountRepertory: {
    label: "库存",
    field: "CountRepertory",
  },
  Saleroom: {
    label: "累计销售额",
    field: "Saleroom",
  },
  status: {
    label: "上下架状态",
    field: "status",
  },
};

const allTableThead = [
  "id",
  "supplier_name",
  "goods_name",
  "sub_title",
  "product_code",
  "type",
  "main_image",
  "CountRepertory",
  "Saleroom",
  "status",
];
const defaultTableThead = [
  "supplier_name",
  "goods_name",
  "sub_title",
  "product_code",
  "type",
  "main_image",
  "CountRepertory",
  "Saleroom",
  "status",
];
export default {
  name: "supplierorder",
  components: { LogoUpload, Editgoods },
  props: ["detailsobj"],
  data() {
    return {
      Infodetail: "",
      kucunData: [],
      editdialogVisible: false,
      id: "",
      svalue: "",
      options: [],
      values: "点击关闭",
      dialogVisible: false,
      loading: true,
      drawer: false, //详情
      direction: "rtl", //抽屉的出来形式
      currentPage4: 1, //页码
      value: "",
      total: 0,
      query: {
        id: "",
        page: 1,
        count: 10,
        type: "",
        goods_name: "",
        category_id: "",
        supplier_id: "",
      },
      radio1: "1",
      form: {
        sub_title: "", //副标题
        typer: "", //商品类型
        goods_name: "", //商品名字
        category_id: "", //类目ID
        main_images: {},
        thumbnail: "",
        thumbnails: {},
        main_image: "",
        slider_image: "",
        slider_images: {},
        shipping_fee: "", //运费
        status: "", //状态
        sort: "", //排序
        remark: "", //备注
      },
      rules: {
        name: [{ required: true, message: "请输入商品名称", trigger: "blur" }],
        region: [{ required: true, message: "请选择单位", trigger: "change" }],
        delivery: [
          { required: true, message: "请选择配送方式", trigger: "change" },
        ],
      }, //表单验证
      forms: {
        id: "",
        goods_id: 1,
        sku_name: "", //规格名称
        retail_price: "", //零售价
        cost_price: "", //成本价
        inventory: "", //库存
        code: "", //产品码
        inventory_alert: "1", //库存预警
        unit: "", //单位
        sku_img: "", //规格图片
      },
      rules: {
        sku_name: [
          { required: true, message: "请输入规格名称", trigger: "blur" },
        ],
        retail_price: [
          { required: true, message: "请输入零售价", trigger: "blur" },
        ],
        cost_price: [
          { required: true, message: "请输入成本价", trigger: "blur" },
        ],
        inventory: [{ required: true, message: "请输入库存", trigger: "blur" }],
        code: [{ required: true, message: "请输入产品码", trigger: "blur" }],
        unit: [{ required: true, message: "请选择单位", trigger: "change" }],
        sku_img: [{ required: true, message: "请上传图片", trigger: "change" }],
      }, //表单验证
      editform: {
        id: "",
        goods_id: 1,
        sku_name: "", //规格名称
        retail_price: "", //零售价
        cost_price: "", //成本价
        inventory: "", //库存
        code: "", //产品码
        inventory_alert: "", //库存预警
        unit: "", //单位
        sku_img: "", //规格图片
      },
      activeName: "1", //订单类型
      activeNames: "six", //详情里面的类型切换
      tableData: [], //列表
      typeData: [], //类目list
      multipleSelection: [], //勾选的订单
      goodsdetail: {},
      tableKey: 1, // table key
      tableTheadOptions: tableTheadOption,
      allTableThead: allTableThead,
      tableThead: defaultTableThead, // 默认表头
      checkboxTableThead: defaultTableThead, // 默认表头值
      skulist: [],
      sku_imgs: {},
      detailLoading: false,
    };
  },
  watch: {
    checkboxTableThead(valArr) {
      this.tableThead = this.allTableThead.filter(
        (i) => valArr.indexOf(i) >= 0
      );
      this.tableKey = this.tableKey + 1; // 为了保证table 每次都会重渲
    },
  },
  mounted() {
    this.query.supplier_id = this.detailsobj.id;
    console.log(this.detailsobj.id);
    this.getlist(); //产品列表
    this.getcartlist(); //类目列表
    this.SupplierLists(); //供应商列表
    this.getlevedlist(); //规格列表
    this.SupplierskuLists(); //单位列表
  },
  methods: {
    closing_balance_details(){
      this.drawer = false
    },
    editStatusWay(row) {
      let obj = {
        id: row.id,
        status: row.status == 1 ? 2 : 1,
      };
    },
    //修改规格
    comitedit(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          //请求接口
          SaveGoodsProduct(this.editform).then((res) => {
            this.editdialogVisible = false;
            this.$messages.success("编辑成功");

            this.getlevedlist();
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    //sku列表
    SupplierskuLists() {
      getLabelList().then((res) => {
        this.skulist = res.data;
      });
    },
    //切换规格单元
    changesku(val) {
      this.editform.unit = val;
    },
    // 规格上传回调
    skuCallback(singleFile) {
      this.sku_imgs = singleFile;
      this.editform.sku_img = singleFile.url;
    },
    //编辑
    editlevel(row) {
      this.editform = JSON.parse(JSON.stringify(row));
      this.editform.inventory_alert = String(this.editform.inventory_alert);
      let obj = {
        url: JSON.parse(JSON.stringify(row)).sku_img,
      };
      this.sku_imgs = obj;
      this.editdialogVisible = true;
    },
    handleClose() {
      this.dialogVisible = false;
    },
    //规格列表
    getlevedlist() {
      let param = {
        GoodsId: 27,
      };
      getGoodsProductList(param).then((res) => {
        this.kucunData = res.data;
      });
    },
    //确认提交表单
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          alert("submit!");
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    // 文件上传回调
    logoCallback(singleFile) {
      this.form.main_images = singleFile;
      this.form.main_image = singleFile.url;
    },
    // 文件上传回调
    logoCallbacks(singleFile) {
      this.form.thumbnails = singleFile;
      this.form.thumbnail = singleFile.url;
    },
    // 文件上传回调
    logoCallbackss(singleFile) {
      this.form.slider_images = singleFile;
      this.form.slider_image = singleFile.url;
    },
    //编辑
    editorder(row) {
      this.$router.push({
        path: "/supplier/supplierorder/edits/",
        query: {
          id: row.id,
        },
      });
    },
    //重置
    resetting() {
      this.query.id = "";
      this.query.goods_name = "";
      this.query.category_id = "";
      this.query.supplier_id = this.detailsobj.id;
      this.getlist();
    },
    //切换搜索分类
    handleChange(value) {
      const length = value.length;
      const lastValue = value[length - 1];
      this.form.category_id = lastValue;
      this.query.category_id = lastValue ? length + ":" + lastValue : "";
    },
    //供应商列表
    SupplierLists() {
      supplierLists().then((res) => {
        this.options = res.data;
      });
    },
    //类目列表
    getcartlist() {
      GoodsCateList().then((res) => {
        this.typeData = res.data;
      });
    },
    //产品列表
    getlist() {
      this.loading = true;
      goodslist(this.query).then((res) => {
        this.loading = false;
        this.currentPage4 = res.data.currentPage;
        this.total = res.data.total;
        this.tableData = res.data.list;
      });
    },
    // 选中的每条列表
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    //添加产品
    sendoutgoods() {
      this.$router.push("/supplier/supplierorder/add/");
    },
    //规格管理
    management(row) {
      this.$router.push({
        path: "/supplier/supplierorder/type/",
        query: {
          id: row.id,
        },
      });
      // this.dialogVisible = true
    },
    //查看订单详情
    detailorder(row) {
      this.id = row.id;
      this.goodsdetail = row;
      this.drawer = true;
      this.detailLoading = true;
      getSupplierGoodsInfo({ id: row.id }).then((res) => {
        this.goodsdetail = res.data;
        this.Infodetail = res.data.goods_detail.detail.replace(
          /<img/g,
          '<img mode="widthFix" style="max-width:100%;"'
        );
        this.Infodetail = this.Infodetail.replace(
          /width: 750px/g,
          "width: 100%"
        );
        this.detailLoading = false;
      });
    },
    //页码
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    },
    //点击搜索
    search() {
      console.log(this.query, "搜索的数据");
      this.getlist();
    },
    //切换订单类型
    handleClick(tab, event) {
      let carttppe = tab._props.name;
      this.query.type = carttppe;
      this.getlist();
    },
    //切换详情类型
    handledetailClick(tab, event) {
      console.log(tab, event);
    },
    //删除订单
    deleteorder(id) {
      let param = {
        id: id,
      };
      this.$confirm("确定要删除商品吗！", "删除商品", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          delgoods(param).then((res) => {
            this.$messages.success("删除成功");
            this.getlist(); //产品列表
          });
          // this.$messages({
          //   type: "success",
          //   message: "删除成功!",
          // });
        })
        .catch(() => {});
    },
  },
};
</script>

  <style lang="scss">
.title {
  color: rgba(0, 0, 0, 0.85);
  font-weight: 500;
  font-size: 16px;
  line-height: 16px;
}

.sn {
  color: #606266;
  font-size: 13px;
}

.order_center {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 50px 0 0;
  font-size: 13px;
  color: #666;
}

.fleximg {
  font-size: 12px;
  display: flex;
  align-items: center;
  color: #606266;
}

// #addgoods .single-image-uploader-icon{
//   width: 90px;
//   height: 90px;
// }
// #addgoods .single-image-uploader{
//   width: 90px;
//   height: 90px;
// }
// #addgoods .el-upload {
//   width: 90px;
//   height: 90px;
// }
// #addgoods .el-upload--text{
//   width: 90px;
//   height: 90px;
// }
// #addgoods .single-image-uploader-icon{
//   line-height: 90px;
// }
// #addgoods .single-image{
//   width: 90px;
//   height: 90px;
// }
#addgoods .el-upload--picture-card {
  width: 90px !important;
  height: 90px !important;
  line-height: 90px;
}

#addgoods .el-upload-list--picture-card .el-upload-list__item-actions {
  width: 90px !important;
  height: 90px !important;
}

#addgoods .el-upload-list--picture-card .el-upload-list__item-thumbnail {
  width: 90px !important;
  height: 90px !important;
}

#addgoods .el-upload-list--picture-card .el-upload-list__item {
  width: 90px !important;
  height: 90px !important;
}
</style>
  <style lang="scss" scoped>
.phone {
  position: relative;
  margin-left: 50%;
  width: 380px;
  height: 800px;
  border: 5px solid #949494;
  border-radius: 40px;
  transform: scale(0.8) translateY(-50px);
}

.phone:before {
  content: "";
  position: absolute;
  width: 369px;
  height: 789px;
  // box-shadow: 0px 0px 24px #000;
  background-color: #000;
  border-radius: 33px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.phone:after {
  content: "";
  position: absolute;
  width: 364px;
  height: 786px;
  background: #fff;
  border-radius: 28px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.html {
  position: absolute;
  width: 364px - 5px - 5px;
  height: 786px - 5px - 5px;
  background: #fff;
  border-radius: 30px;
  overflow: hidden;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 5px;
  z-index: 1;
}

.receiver {
  position: absolute;
  top: 5px;
  left: 50%;
  margin-left: -50px;
  background: #000000;
  border: #484848 1px solid;
  width: 100px;
  height: 8px;
  z-index: 9;
  border-radius: 20px;
}

.receiver ul {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  margin: 1px;
  justify-content: space-around;
}

.receiver ul li {
  background: #303030;
  width: 1px;
  height: 1.5px;
  float: left;
  transform: skewX(-38deg);
}
.receiver div {
  width: 100px;
  height: 8px;
}

.receiver div:after {
  content: "";
  display: block;
  width: 95%;
  height: 83%;
  top: 1px;
  left: 3px;
  position: absolute;
  background-repeat: no-repeat;
  background-image: repeating-linear-gradient(
      to right,
      #434242,
      #000000 1px,
      rgba(255, 255, 255, 0) 1px,
      rgba(255, 255, 255, 0) 3px
    ),
    repeating-linear-gradient(
      to right,
      #434242,
      #19191d 1px,
      rgba(255, 255, 255, 0) 1px,
      rgba(255, 255, 255, 0) 3px
    );
  background-size: 100% 50%;
  background-position: 0 0, 2px 4px;
  transform: skew(-25deg);
}
.labelView {
  width: 150px;
}
</style>
